﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="product_images.aspx.cs" Inherits="WebApplication.admin.Images" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>产品图片管理</title>
<meta http-equiv="x-ua-compatible" content="ie=7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../scripts/script.js"></script>
<style type="text/css">
.image { width: 100px; height: 100px; float: left; border: 1px solid silver; margin: 0px 0px 12px 12px; padding: 2px; overflow: hidden; }
.image img { width: 100px; height: 75px; margin-bottom: 4px; }
#zoom { position: absolute; border: 1px solid silver; padding: 2px; background-color: white; }
</style>
<link href="../scripts/lytebox/lytebox.css" rel="stylesheet" />
<script type="text/javascript" src="../scripts/lytebox/lytebox.js"></script>
<script type="text/javascript">
    function zoom(e, out) {
        if (out) {
            var p = $(e).pos();
            $('zi').src = e.src;
            $('zoom').show().moveTo(p.left - 3, p.top - 3);
        }
        else $('zoom').hide();
    }
</script>
</head>
<body>
<% if (isadd) { %>
<div class="root page-nav">
    <a href="products.aspx?start=<%= start %>&limit=<%= limit %>">返回产品列表</a>
    <a href="product_images.aspx?pid=<%= pid %>&start=<%= start %>&limit=<%= limit %>">返回图片列表</a></div>
<form class="form root" method="post" action="?do=save&pid=<%= pid %>&start=<%= start %>&limit=<%= limit %>" enctype="multipart/form-data">
<h3>上传产品图片</h3>
<div class="item"><label>产品信息：</label><%= info %></div>
<div class="item"><label>选择图片：</label><input type="file" name="file" id="file" class="text" /></div>
<div class="item">
    <label>产品图片：<br /><br />说明：产品图片<br />宽高比例4:3，<br />最佳尺寸为<br />360*270px
    </label>
    <div id="pre" class="preview" style="width: 366px; height: 276px"></div>
</div>
<div class="item"><label>&nbsp;</label><input type="submit" value="保存" /></div>
</form>
<script type="text/javascript" src="../scripts/qsl.ui.imagepreview.js"></script>
<script type="text/javascript" src="../scripts/qsl.validate.net.js"></script>
<script type="text/javascript">
    new ImagePreview('pre', 360, 270, { input: 'file' });
    new FormChecker([['file', '请选择一张产品图片', function (v) { return !!(ip.src || v) }]]);
</script>
<% } else { %>
<div id="zoom" style="display: none" onmouseout="zoom(null,false)"><img alt="" id="zi" src="../images/s.gif" /></div>
<div class="root page-nav"><a href="products.aspx?start=<%= start %>&limit=<%= limit %>">返回产品列表</a> <a href="?do=add&pid=<%= pid %>&start=<%= start %>&limit=<%= limit %>">添加图片</a></div>

<asp:repeater runat="server" id="i_list">
<itemtemplate>
<div class="image">
    <a rel="lytebox[x]" href="/<%# DataBinder.Eval(Container.DataItem,"GUID") %>.ashx"><img src="/upload/products/<%# DataBinder.Eval(Container.DataItem,"GUID") %>.jpg" alt="" /></a>
    <a style="display:<%# true.Equals(DataBinder.Eval(Container.DataItem,"IsCover"))?"none":"inline" %>" href="?do=delete&pid=<%= pid %>&id=<%# DataBinder.Eval(Container.DataItem,"Id") %>&start=<%= start %>&limit=<%= limit %>" onclick="return confirm('确定删除这张图片？')">删除</a>
    <%# true.Equals(DataBinder.Eval(Container.DataItem, "IsCover"))?"封面不能删除":"" %>
</div>
</itemtemplate>
</asp:repeater>

<div class="clear" style="border-top: 1px dashed silver; padding: 4px 0 0 10px;">注：每个产品的图片不应超过四张。</div>
<% } %>
</body>
</html>
